<template>
<q-page :padding="!$q.platform.is.mobile">
    <q-inner-loading visible v-if="loading">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>

    <!-- header -->
    <q-toolbar color="primary">
       <q-btn dense label="上传名单" icon="mdi-upload" color="primary"  @click="uploadAuthor($event)" :loading="uploading">
            <input type="file" style="display:none;"/>
        </q-btn>
      <q-toolbar-title></q-toolbar-title>
      <q-toolbar-title shrink>
        <span slot="subtitle" class="text-right">
          <div><b>{{mainCount}}</b>人</div>
          <div>正式作者</div>
        </span>
      </q-toolbar-title>
      <q-toolbar-title shrink>
        <span slot="subtitle">
          <q-btn dense label="下载名单" icon="mdi-download" color="primary"  
            @click="downloadAuthor()" :loading="downloading"></q-btn>
        </span>
      </q-toolbar-title>
    </q-toolbar>

    <!-- search-bar -->
    <q-collapsible class="search-bar" ref="collapsible">
        <template slot="header">
            <q-search no-icon class="full-width no-shadow" v-model="params.key" 
                    inverted-light color="grey-2"
                    placeholder="关键词(多个以空格分隔),如:北京/海外/美食/国产" autofocus="true" clearable 
                    @click="clickQuery($event)" />
            <q-btn color="primary" icon="mdi-account-search" flat dense
                    @click="query($event)" :loading="loading" />
        </template>
        <q-list dense class="q-py-none" no-border>
            <q-list-header  class="q-py-none text-right" style="min-height:10px;">详细搜索条件</q-list-header>
            <q-item>
                <div class="row no-wrap">
                    <q-input class="col" type="number" v-model="params.min" float-label="最小粉丝量" />
                    <q-input class="col" type="number" v-model="params.max" float-label="最大粉丝量" />
                </div>
            </q-item>
            <q-item>
                <q-field label="城市">
                    <q-checkbox keep-color v-model="params.cities" val="北京" label="北京"   color="teal" />
                    <q-checkbox keep-color v-model="params.cities" val="上海" label="上海" color="orange" />
                    <q-checkbox keep-color v-model="params.cities" val="广州" label="广州"  color="blue" />
                    <q-checkbox keep-color v-model="params.cities" val="深圳" label="深圳"  color="green" />
                    <q-checkbox keep-color v-model="params.cities" val="成都" label="成都" color="red" />
                    <q-checkbox keep-color v-model="params.cities" val="杭州" label="杭州"  color="black" />

                    <q-checkbox keep-color v-model="params.cities" val="西安" label="西安"   color="teal" />
                    <q-checkbox keep-color v-model="params.cities" val="重庆" label="重庆" color="orange" />
                    <q-checkbox keep-color v-model="params.cities" val="南京" label="南京"  color="blue" />
                    <q-checkbox keep-color v-model="params.cities" val="沈阳" label="沈阳"  color="green" />
                    <q-checkbox keep-color v-model="params.cities" val="武汉" label="武汉"  color="red" />
                    <q-checkbox keep-color v-model="params.cities" val="海外" label="海外" color="black" />
                </q-field>
            </q-item>
            <q-item-separator />
            <q-item>
                <q-field label="分类">
                    <q-checkbox keep-color v-model="params.cats" val="1" label="电影"   color="teal" />
                    <q-checkbox keep-color v-model="params.cats" val="2" label="连续剧" color="orange" />
                    <q-checkbox keep-color v-model="params.cats" val="4" label="综艺"  color="blue" />
                    <q-checkbox keep-color v-model="params.cats" val="8" label="艺人"  color="green" />
                </q-field>
            </q-item>
            <q-item-separator />
            <q-item>
                <q-field label="星级">
                    <q-checkbox keep-color v-model="params.star" val="1" label="1星" color="teal" />
                    <q-checkbox keep-color v-model="params.star" val="2" label="2星" color="orange" />
                    <q-checkbox keep-color v-model="params.star" val="3" label="3星" color="blue" />
                    <q-checkbox keep-color v-model="params.star" val="4" label="4星" color="green" />
                    <q-checkbox keep-color v-model="params.star" val="5" label="5星" color="red" />
                </q-field>
            </q-item>
            <q-item-separator />
            <q-item>
                <q-field label="是否挑片子">
                    <q-checkbox keep-color v-model="params.mind" val="不挑片子" label="不挑" color="teal" />
                    <q-checkbox keep-color v-model="params.mind" val="轻度挑片" label="轻度" color="orange" />
                    <q-checkbox keep-color v-model="params.mind" val="中度挑片" label="中度" color="blue" />
                    <q-checkbox keep-color v-model="params.mind" val="重度挑片" label="重度" color="green" />
                </q-field>
            </q-item>
            <q-item-separator />
            <q-item>
                <q-field label="文章质量">
                    <q-checkbox keep-color v-model="params.quality" val="超烂" label="超烂" color="teal" />
                    <q-checkbox keep-color v-model="params.quality" val="较差" label="较差" color="orange" />
                    <q-checkbox keep-color v-model="params.quality" val="普通" label="普通" color="blue" />
                    <q-checkbox keep-color v-model="params.quality" val="较好" label="较好" color="green" />
                    <q-checkbox keep-color v-model="params.quality" val="超棒" label="超棒" color="red" />
                </q-field>
            </q-item>
            <q-item-separator />
            <q-item>
                <q-field label="出稿速度">
                    <q-checkbox keep-color v-model="params.speed" val="拖稿" label="拖稿" color="teal" />
                    <q-checkbox keep-color v-model="params.speed" val="慢（3天以上）" label="较慢" color="orange" />
                    <q-checkbox keep-color v-model="params.speed" val="一般（2-3天）" label="一般" color="blue" />
                    <q-checkbox keep-color v-model="params.speed" val="较好（1-2天）" label="较快" color="green" />
                    <q-checkbox keep-color v-model="params.speed" val="很快（当天出）" label="很快" color="red" />
                </q-field>
            </q-item>
            <q-item-separator />
             <q-item>
                <q-btn color="primary" class="full-width q-my-sm" icon="mdi-account-search" label="搜索" 
                    @click="query" :loading="loading" />
            </q-item>
        </q-list>
    </q-collapsible>

    <q-tabs class="col-xs-12 col-md-10" align="justify" inverted>
      <!-- 选项卡 - 注意slot="title" -->
      <q-tab slot="title" label="正式作者"  @select="select('0')" default />
      <q-tab slot="title" label="已拉黑"  @select="select('-1')" :count="blackCount" />

        <q-list v-scroll="scrolled" separator :no-border="$q.platform.is.mobile" :style="$q.platform.is.desktop?'padding:8px;':''">
            <q-collapsible v-for="item in slicedList" :key="'author'+item.userId">
                <template slot="header">
                    <q-chip dense small floating color="primary" style="right:0.1rem" 
                        v-if="item.articles==''">新</q-chip>
                <q-item-main>
                    <q-item-tile label>
                        <a :href="'https://www.douban.com/people/'+item.userId+'/'" target="_blank">{{item.userName}}</a>                  
                        
                        <small>（{{item.district == '外' ? '海外 - ' : ''}}{{item.city}}）</small>
                    </q-item-tile>
                    <q-item-tile sublabel>
                        <q-rating v-if="item.star>0" v-model="item.star" readonly :max="parseInt(item.star)" color="primary" /> 
                            <small>（<b>{{item.followerCount}}</b>粉）</small>                 
                    </q-item-tile>
                    <q-item-tile sublabel>
                        <small v-if="item.articles!=''" class="text-primary">({{item.lastCommentDate}}){{item.articles.substring(0,15)}}</small>
                        <small v-if="item.articles==''">暂无约稿记录</small>      
                    </q-item-tile>
                </q-item-main>
                <q-item-side right v-if="item.status != -1">
                    <q-chip dense square color="teal" v-if="(item.cats & 1) > 0">影</q-chip>
                    <q-chip dense square color="orange" v-if="(item.cats & 2) > 0">剧</q-chip>
                    <q-chip dense square color="blue" v-if="(item.cats & 4) > 0">综</q-chip>
                    <q-chip dense square color="green" v-if="(item.cats & 8) > 0">人</q-chip>
                </q-item-side>
                <!--
                <q-item-side right v-if="item.status != 0">
                <q-chip  v-if="item.status == -1" dense square color="black">已拉黑</q-chip>
                <q-chip  v-if="item.status == 1" dense square color="secondary">等回应</q-chip>
                <q-chip  v-if="item.status == 2" dense square color="blue">待联系</q-chip>
                </q-item-side>
                -->
                <!-- action list -->
                <q-item-side right v-if="isAuthor">
                    <!--
                <q-btn v-if="isAuthor" dense outline color="black"  label="删除"
                    @click="deleteAuthor(item, $event)"/>
                    -->
                <q-btn dense outline color="primary" 
                    :label="isAuthor ? '编辑' : '记录' "  
                    @click="editAuthor(item, $event)"/>
                </q-item-side>
            </template>
            <div class="row gutter-sm">
                <q-list class="col-xs-12 col-md-6" no-border separator>
                    <q-item>
                        <q-item-main label="豆瓣ID" />
                        <q-item-side right>{{item.userId}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="作者昵称" />
                        <q-item-side right>{{item.userName}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="粉丝数量" />
                        <q-item-side right>{{item.followerCount}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="所在城市" />
                        <q-item-side right>{{item.district == '外' ? '海外 - ' : ''}}{{item.city}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="分类" />
                        <q-chip  square color="teal" v-if="(item.cats & 1) > 0">电影</q-chip>
                        <q-chip  square color="orange" v-if="(item.cats & 2) > 0">连续剧</q-chip>
                        <q-chip  square color="blue" v-if="(item.cats & 4) > 0">综艺</q-chip>
                        <q-chip  square color="green" v-if="(item.cats & 8) > 0">艺人</q-chip>
                    </q-item>
                    <q-item>
                        <q-item-main label="评级" />
                        <q-item-side right>
                            <q-rating v-if="item.star>0" v-model="item.star" readonly :max="parseInt(item.star)" color="primary" />                         
                        </q-item-side>
                    </q-item>
                </q-list>
                <q-list class="col-xs-12 col-md-6" no-border separator>
                    <q-item>
                        <q-item-main label="类型" />
                        <q-item-side right>{{item.pref}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="擅长哪国" />
                        <q-item-side right>{{item.expert}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="风格" />
                        <q-item-side right>{{item.style}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="是否挑片" />
                        <q-item-side right>{{item.mind}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="文章质量" />
                        <q-item-side right>{{item.quality}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="出稿速度" />
                        <q-item-side right>{{item.speed}}</q-item-side>
                    </q-item>
                </q-list>
                <q-list class="col-xs-12" no-border separator>
                    <q-item>
                        <q-item-main label="特殊备注" />
                        <q-item-side right>{{item.note}}</q-item-side>
                    </q-item>
                    <q-item>
                        <q-item-main label="对接人" />
                        <q-item-side right>{{item.manager}}</q-item-side>
                    </q-item>
                    <q-item>
                        约稿记录 <br/>
                        {{item.articles}}
                    </q-item>
                    <q-item>
                        近期影评影片 <br/>
                        {{item.movies}}
                    </q-item>
                </q-list>
            </div>
            </q-collapsible>
        </q-list>

    </q-tabs>
    <!-- create new -->
    <q-btn v-if="isAuthor" round color="primary" class="fixed" icon="add" size="lg"
      style="right: 15px; bottom: 15px" @click="addSingleAuthor"/>

    <!-- modal -->
    <q-modal class="author-modal" v-model="modal" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">
        <q-toolbar color="primary">
            <q-toolbar-title>约稿作者信息</q-toolbar-title>
            <q-btn flat round dense icon="mdi-close" @click="modal=false" />
        </q-toolbar>
        <!-- create new -->
        <q-list dense class="q-py-none" :no-border="$q.platform.is.mobile">
            <template v-if="isAuthor">
                <q-item>
                    <q-btn color="black" class="full-width q-my-sm" label="删除作者" 
                        @click="deleteAuthor(author, $event)" />
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-input class="full-width" type="number" hide-underline v-model="author.userId" float-label="豆瓣ID(必填)" />
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-input class="full-width" hide-underline v-model="author.userName" float-label="作者姓名or昵称" />
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-input class="full-width" type="number" hide-underline v-model="author.followerCount" float-label="粉丝数量" />
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-field label="国内or海外">
                        <q-radio v-model="author.district" val="内" label="国内" color="primary" />
                        
                        <q-radio v-model="author.district" val="外" label="海外" color="teal" />
                    </q-field>
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-input class="full-width" hide-underline v-model="author.city" float-label="所在城市" />
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-field label="分类">
                        <q-checkbox keep-color v-model="cat1" label="电影"   color="primary" />
                        <q-checkbox keep-color v-model="cat2" label="连续剧" color="teal" />
                        <q-checkbox keep-color v-model="cat3" label="综艺"  color="orange" />
                        <q-checkbox keep-color v-model="cat4" label="艺人"  color="blue" />
                    </q-field>
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-field label="星级">
                        <!--
                        <q-radio v-model="author.star" val="0" label="未定" color="primary" />
                        <q-radio v-model="author.star" val="1" label="1星" color="teal" />                     
                        <q-radio v-model="author.star" val="2" label="2星" color="orange" />                     
                        <q-radio v-model="author.star" val="3" label="3星" color="blue" />                     
                        <q-radio v-model="author.star" val="4" label="4星" color="green" />
                        <q-radio v-model="author.star" val="5" label="5星" color="black" />
                        -->
                        <q-rating v-model="author.star" :max="5" color="primary" />
                    </q-field>
                    
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-input class="full-width" hide-underline v-model="author.pref" float-label="类型(情感/评论/女性等)" />
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-input class="full-width" hide-underline v-model="author.expert" float-label="擅长(综合/国产/好莱坞/港片等)" />
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-input class="full-width" hide-underline v-model="author.style" float-label="风格(文艺/抒情/严肃等)" />
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-field label="是否挑片子">
                        <q-radio v-model="author.mind" val="" label="未定" color="primary" />
                        
                        <q-radio v-model="author.mind" val="不挑片子" label="不挑" color="teal" />
                        
                        <q-radio v-model="author.mind" val="轻度挑片" label="轻度" color="orange" />
                        
                        <q-radio v-model="author.mind" val="中度挑片" label="中度" color="blue" />
                        
                        <q-radio v-model="author.mind" val="重度挑片" label="重度" color="green" />
                    </q-field>
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-field label="文章质量">
                        <q-radio v-model="author.quality" val="" label="未定" color="primary" />
                        
                        <q-radio v-model="author.quality" val="超烂" label="超烂" color="teal" />
                        
                        <q-radio v-model="author.quality" val="较差" label="较差" color="orange" />
                        
                        <q-radio v-model="author.quality" val="普通" label="普通" color="blue" />
                        
                        <q-radio v-model="author.quality" val="较好" label="较好" color="green" />
                        
                        <q-radio v-model="author.quality" val="超棒" label="超棒" color="red" />
                    </q-field>
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-field label="出稿速度">
                        <q-radio v-model="author.speed" val="" label="未定" color="primary" />
                        
                        <q-radio v-model="author.speed" val="拖稿" label="拖稿" color="teal" />
                        
                        <q-radio v-model="author.speed" val="慢（3天以上）" label="较慢" color="orange" />
                        
                        <q-radio v-model="author.speed" val="一般（2-3天）" label="一般" color="blue" />
                        
                        <q-radio v-model="author.speed" val="较好（1-2天）" label="较快" color="green" />
                        
                        <q-radio v-model="author.speed" val="很快（当天出）" label="很快" color="red" />
                    </q-field>
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-input class="full-width" type="textarea" rows="3" hide-underline v-model="author.note" float-label="特殊备注" />
                </q-item>
                <q-item-separator />
                <q-item>
                    <q-input class="full-width" hide-underline v-model="author.manager" float-label="对接人" />
                </q-item>
                <q-item-separator />
            </template>
            <!-- 
            <q-item>
                <q-input class="full-width" type="textarea" rows="3" hide-underline v-model="author.articles" float-label="约稿记录" />
            </q-item>
            <q-item-separator />
            -->
            <q-item>
                <q-field label="作者状态">
                    <q-radio v-model="author.status" val="0" label="正式作者" color="primary" />
                    <!-- 
                    <q-radio v-model="author.status" val="1" label="等回应" color="secondary" />
                    <q-radio v-model="author.status" val="2" label="待联系" color="blue" />
                    -->
                    <q-radio v-model="author.status" val="-1" label="已拉黑" color="black" />
                    
                </q-field>
            </q-item>
            <q-item-separator />
            <q-item>
                <q-btn color="primary" class="full-width q-my-sm" icon="mdi-plus" label="保存" 
                    @click="save" :loading="loading" />
            </q-item>
        </q-list>
    </q-modal>
</q-page>
</template>

<style>
div.author-modal span.q-option-label, div.search-bar span.q-option-label {
    margin-left: 0px !important;
    margin-right: 10px;
}

div.search-bar {
    background-color: #fff;
}

div.search-bar .q-collapsible-sub-item {
    padding: 0;
}

.q-item-side + .relative-position {
    margin-left: 0;
    min-width: 20px;
}
/*
div.search-bar div.q-item {
    padding: 1px 2px;
}
*/
 
</style>

<script>

function newAuthor() {
    return {
        userId: '',
        userName: '',
        followerCount: 0,
        district: '内',
        city: '',
        cats: 0,
        star: 0,
        pref: '',
        expert: '',
        style: '',
        mind: '',
        quality: '',
        speed: '',
        note: '',
        manager: '',
        articles: '',
        status: '0'
    }
}

export default {
  name: 'PageIndexAuthor',
  data () {
    return {
        isAuthor: this.$api.account.isAuthor(),
        author: newAuthor(),
        params: {
            key:'',
            min:'',
            max:'',
            cats:[],
            star:[],
            mind:[],
            quality:[],
            speed:[],
            cities:[],
            status:-1
        },
        currentIndex: 15,
        modal: false,
        downloading: false,
        uploading: false,
        loading: false,
        selected: "0",
        list: []
    }
  },
  created() {
    var me = this;
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      if (key == 13) {
        me.query(e);
      }
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '约稿作者';
    this.query();

    if(this.$route.query.editor) {
      this.modal = true;
      var data = this.$route.query.editor.split('-_-');
      this.author.userId = data[0];
      this.author.userName = data[1];
      this.author.followerCount = data[2];
      this.author.status = data[3];
    }
  },
  methods: {
      select(type) {
        this.selected = type;
      },
      scrolled: function() {
          this.currentIndex += 5;
      },
      clickQuery: function(e) {
          e.stopPropagation();
      },
      query: function(e) {  
          if(e) e.stopPropagation();               
          let me = this;
          me.loading = true;
          me.$api.author.queryAuthor(me.params, res=>{
              me.currentIndex = 15;
              me.list = res.data.model;
              me.loading = false;
              me.$refs.collapsible.hide();
              if(me.list.length == 0) {
                me.$q.notify({ message: '没有符合条件的作者', type: 'warning' });
              }
          }, error=>{
              me.loading = false;
          });
      },
      deleteAuthor: function(item, e) {
          let me = this;

          me.$q.dialog({
                title: '作者删除确认',
                message: '确定删除作者【'+item.userName+'】吗？',
                ok: '确定',
                cancel: '取消'
              }).then(() => {
                
                item.status = "-2";
                var index = me.list.indexOf(item);
                if (index > -1) {
                    me.list.splice(index, 1);
                }
                e.stopPropagation();
                me.$api.author.saveAuthor(item, ret => {}, error =>{});
                me.modal = false;

              }).catch(() => {
                // cancel 
              })

          
      },
      editAuthor: function(item, e) {
          this.author = item;
          //this.author.star = this.author.star + '';
          this.modal = true;
          e.stopPropagation();
      },
      downloadAuthor: function() {
          //console.log("download");
          let me = this;
          me.downloading = true;
          me.$api.author.downloadAuthor(me.params, function(){
              me.downloading = false;
          });
      },
      uploadAuthor: function(e) {
        let me = this;
        let inputNode = e.target.parentElement.getElementsByTagName("input")[0];
        inputNode.onchange = function(){
            let file = inputNode.files[0];
            me.uploading = true;
            me.$api.author.importAuthor(file, res=>{
                me.query();
                me.uploading = false;
            }, error =>{
                me.uploading = false;
            });
        };
        inputNode.click();
      },
    save: function() {
        let me = this;

        if(me.author.status == '-1' && me.author.note.length == 0) {
            me.$q.notify({ message: '拉黑作者必须在特殊备注中标明原因', type: 'warning' });
            return;
        }

        me.loading = true;
        me.$api.author.saveAuthor(me.author, ret => {
            me.query();
            me.modal = false;
            me.loading = false;
        }, error =>{
            me.loading = false;
        });
    },
    addSingleAuthor: function() {
        this.author = newAuthor();
        this.modal = true;
    }
  }, 
  computed: {
      slicedList() {
          let selected = this.selected;
          let filteredList = this.list.filter(function (user) {
             if(user.status != selected) {
                 return false;
             }
             return true;
            });

          if(filteredList.length < this.currentIndex) {
              return filteredList;
          } else {
              return filteredList.slice(0, this.currentIndex);
          }
      },
      mainCount() {
          let main = 0;
          this.list.forEach(user => {
              if(user.status == '0') {
                  main++;
              }
          });
          return main;
      },
      blackCount() {
          let black = 0;
          this.list.forEach(user => {
              if(user.status == '-1') {
                  black++;
              }
          });
          return black;
      },
    cat1: {
      get: function () { return (this.author.cats & 1) > 0; },
      set: function (newValue) { this.author.cats = (this.author.cats ^ 1); }
    },
    cat2: {
      get: function () { return (this.author.cats & 2) > 0; },
      set: function (newValue) { this.author.cats = (this.author.cats ^ 2); }
    },
    cat3: {
      get: function () { return (this.author.cats & 4) > 0; },
      set: function (newValue) { this.author.cats = (this.author.cats ^ 4); }
    },
    cat4: {
      get: function () { return (this.author.cats & 8) > 0; },
      set: function (newValue) { this.author.cats = (this.author.cats ^ 8); }
    }
  }
}
</script>

